<template>
    <!-- 折线图容器 -->
    <div class="chart" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

// 模版引用
const chart = ref();
// 数据
const x_data = ref(['2021', '2022', '2023', '2024'])
const s_data1 = ref([10.0, 8.8, 6.2, 10.7])
const s_data2 = ref([8.5, 6.6, 10.8, 11.3])
const s_data3 = ref([4.5, 3.6, 6.9, 9.3])
const s_data4 = ref([2.2, 1.4, 2.1, 1.9])
const s_data5 = ref([2.3, 2.1, 1.5, 1.2])

// onMounted()钩子挂载函数
onMounted(() => {
    //基于创建好的dom，初始化echarts实例
    const myChart = echarts.init(chart.value);

    //指定数据配置项
    const option = {
        //背景颜色
        backgroundColor: "white",
        // 标题
        title: {
            text: '2024年全年营业收入',
            left: "center",
            show: false,
            bottom: 5,
            textStyle: {
                fontFamily: "SimHei",
                fontSize: 12
            }
        },
        //图例
        legend: {
            data: ['金融业', '房地产', '建筑业', '批发和零售业', '制造业'],
            //距离顶部的距离
            top: 9,
            //文本样式设置
            textStyle: {
                fontFamily: "Arial",
                fontWeight: "bold",
                fontSize: 15,
                // color: "black"
            }
        },
        //直角坐标系绘图网格
        grid: {
            show: false,
            left: 45,
            top: 65,
            right: 20,
            bottom: 28
        },
        // x轴
        xAxis: {
            type: 'category',
            data: x_data.value,
            //控制刻度线显示
            axisTick: {
                show: false,
                inside: true
            },
            //刻度标签配置
            axisLabel: {
                fontFamily: "Arial",
                fontSize: 20,
                fontWeight: "bold",
                color: "black",
            },
            //x轴线设置
            axisLine: {
                lineStyle: {
                    width: 2,
                    color: "balck"
                }
            }

        },
        // y轴
        yAxis: {
            type: 'value',
            //控制刻度线显示
            axisTick: {
                show: false,
                inside: false
            },
            // y轴标题设置
            name: "%",
            nameGap: 5,
            nameLocation: "center",
            nameTextStyle: {
                fontSize: 13,
                fontFamily: "Arial",
                fontWeight: "bolder",
                color: "black"
            },
            //y轴轴线
            axisLine: {
                show: true,
                lineStyle: {
                    width: 2,
                    color: "balck"
                }
            },
            //刻度标签
            axisLabel: {
                fontFamily: "Arial",
                fontSize: 20,
                // fontWeight: "bold",
                color: "black",
                formatter: '{value}%',
                show: false
            },
            //控制线
            splitLine: {
                show: false,
                lineStyle: {
                    type: "dashed",
                    width: 0.8
                }
            }
        },
        // 系列数据
        series: [
            {
                name: '金融业',
                data: s_data1.value,
                type: 'line',
                smooth: true,
                //标签设置
                label: {
                    show: true,
                    position: "top",
                    offset:[15,12],
                    color: "black",
                    fontFamily: "Arial",
                    fontSize: 10,
                    formatter: (params) => {
                        return params.value + "%"
                    }
                },
                itemStyle: {
                    // 设置节点颜色为蓝色
                    color: '#9467bd'
                },
                lineStyle: {
                    width: 2,
                    color: "#9467bd"
                }
            },
            {
                name: '房地产',
                data: s_data2.value,
                type: 'line',
                smooth: true,
                //标签设置
                label: {
                    show: true,
                    position: "top",
                    offset:[4,7],
                    color: "black",
                    fontFamily: "Arial",
                    fontSize: 10,
                    formatter: (params) => {
                        return params.value + "%"
                    }
                },
                itemStyle: {
                    // 设置节点颜色为蓝色
                    color: '#ff7f0e'
                },
                lineStyle: {
                    width: 2,
                    color: "#ff7f0e"
                }
            },
            {
                name: '建筑业',
                data: s_data3.value,
                type: 'line',
                smooth: true,
                //标签设置
                label: {
                    show: true,
                    position: "top",
                    offset:[5,5],
                    color: "black",
                    fontFamily: "Arial",
                    fontSize: 10,
                    formatter: (params) => {
                        return params.value + "%"
                    }
                },
                itemStyle: {
                    // 设置节点颜色为蓝色
                    color: '#2ca02c'
                },
                lineStyle: {
                    width: 2,
                    color: "#2ca02c"
                }
            },
            {
                name: '制造业',
                data: s_data4.value,
                type: 'line',
                smooth: true,
                //标签设置
                label: {
                    show: true,
                    position: "top",
                    offset:[5,20],
                    color: "black",
                    fontFamily: "Arial",
                    fontSize: 10,
                    formatter: (params) => {
                        return params.value + "%"
                    }
                },
                itemStyle: {
                    // 设置节点颜色为蓝色
                    color: '#d62728'
                },
                lineStyle: {
                    width: 5,
                    // shadowBlur: 3,
                    color: "#d62728"
                }
            },
            {
                name: '批发和零售业',
                data: s_data5.value,
                type: 'line',
                smooth: true,
                //标签设置
                label: {
                    show: true,
                    position: "top",
                    offset:[-12,20],
                    color: "black",
                    fontFamily: "Arial",
                    fontSize: 10,
                    formatter: (params) => {
                        return params.value + "%"
                    }
                },
                itemStyle: {
                    // 设置节点颜色为蓝色
                    color: '#1f77b4' 
                },
                lineStyle: {
                    width: 2,
                    color: "#1f77b4"
                }
            }
        ],

        //下载工具
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {
                    // 导出图片的分辨率
                    pixelRatio: 30
                },

            }
        },
    };

    myChart.setOption(option);
})
</script>

<style scoped>
.chart {
    width: 700px;
    height: 300px;
    /* 过渡 */
    transition: 0.5s all linear;
}

.chart:hover {
    /* 缩放 */
    transform: scale(1.025);
    /* 小手 */
    cursor: pointer;
    /* box阴影 */
    box-shadow: 0px 0px 30px gray;
}
</style>
